<template>
  <div class="wf-box">
    <div class="wf-main" select>
      <!-- 有历史记录 -->
      <div class="wf-nav-isRecord" v-if="isRecord.length">
        <van-index-anchor index="历史" >历史记录</van-index-anchor>
        <div
          @click="myClick(itemA)"
          class="isRecord-item"
          v-for="(itemA, IndexA) in isRecord"
          :key="IndexA+'a'"
        >
          <img :src="itemA.src" />
          <div class="wf-item-text"><van-cell :title="itemA.name" /></div>
        </div>
      </div>
        
      <!-- 正常展示 -->
      <van-index-bar v-for="(item, index) in carName" :key="index">
        <van-index-anchor :index="index" >{{ item.index }}</van-index-anchor>
        <div
          @click="myClick(itemC)"
          class="wf-nav-item clear"
          v-for="(itemC, IndexC) in item.children"
          :key="IndexC"
        >
          <img :src="itemC.src" />
          <div class="wf-item-text"><van-cell :title="itemC.name" /></div>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRecord:
       [
        {
          name: "奥迪 A1",
          src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
        },
        {
          name: "奥迪 A2",
          src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
        },
      ],
      carName: [
        {
          index: "A",
          children: [
            {
              name: "奥迪",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
              children: [
                {
                  name: "奥迪 A1",
                  src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                },
                {
                  name: "奥迪 A2",
                  src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                },
                {
                  name: "奥迪 A3",
                  src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                },
                {
                  name: "奥迪 A4",
                  src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
                },
              ],
            },
            {
              name: "a2",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
            },
            {
              name: "a3",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
            },
            {
              name: "a4",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
            },
          ],
        },
        {
          index: "B",
          children: [
            {
              name: "bf",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
            },
            {
              name: "b1",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
            },
            {
              name: "b2",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
            },
            {
              name: "b3",
              src: "https://img1.baidu.com/it/u=902830885,4052311299&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
            },
          ],
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      // Toast("返回");
    },
    onClickRight() {
      // Toast("按钮");
    },
    myClick(item) {
      console.log(item);
      this.$router.push({
        path: "/choose/model",
        query: {
          item,
          hardText: "选择车型",
        },
      });
      // this.$router.push('/choose/model')
    },
  },
  setup() {
    return {
      // indexList: [
      //   "A",
      //   "B",
      //   "C",
      //   "D",
      //   "E",
      //   "F",
      //   "G",
      //   "H",
      //   "I",
      //   "J",
      //   "K",
      //   "L",
      //   "M",
      //   "N",
      //   "O",
      //   "P",
      //   "Q",
      //   "R",
      //   "S",
      //   "T",
      //   "U",
      //   "V",
      //   "W",
      //   "X",
      //   "Y",
      //   "Z",
      // ],
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/var";
.wf-box {
  width: 80%;

  .wf-main {
    
    .index-cnchor {
      background-color: rgb(230, 230, 230);
    }
    .wf-nav-item  {
      margin-left: 20px;
      img {
        width: 34px;
        height: 30px;
        padding: 7px 0;
        float: left;
      }
      .wf-item-text {
        float: left;
      }
    }
    .wf-nav-isRecord {
      float: left;
      width: 100%;
      .isRecord-item {
        width: 120px;
        text-align: center;
        float: left;
      }
       img {
        margin: 0 auto;
        width: 34px;
        height: 30px;
      }
    }
  }
}
</style>